Плавающие блоки

[Lob1AV]

Есть следующие блоки: http://lob1.ru/examples/block/1/
Вопрос: как сделать, чтобы было http://lob1.ru/examples/block/2/, но при этом высота блока будет неизвестна?

Edited January 14, 2016 by Lob1AV

[swetlana]

приходит в голову только какой-то изврат с js.

надо?

[Lob1AV]

приходит в голову только какой-то изврат с js.

надо?

Желательно конечно средствами CSS.

Но и js не помешает. В общем всё надо.

[swetlana]

если кто предложит средствами css — здорово. Мне тоже стало интересно, подпишусь на тему.

Что мне пришло в голову:

• блоки завернуть в единый контейнер с position: relative или absolute;

• всем блокам задать position: absolute;

• средствами js пройтись по всем блокам, можно даже по очереди: сначала нечётным, потом чётным. Например так: $('#container div:nth-child(odd)').each(function(){});

• в этом цикле с каждой итерацией увеличивать значение свойства top для следующего элемента. Ввести для этого переменную.

но это, конечно, изврат тот ещё.

[Lob1AV]

После такого подхода: http://lob1.ru/examples/block/3/ пришла в голову мысль немного схитрить: http://lob1.ru/examples/block/4/.

Это конечно не идеальное решение, но, как мне кажется, уже очень близкое.

js пока не рассматривал - спасибо за наводку.

Edited January 14, 2016 by Lob1AV

[psywalker]

Ахренеть! Бывает же такое)

[Lob1AV]

Я так понимаю, что полностью такую задачу можно будет решить только в CSS3 и только, увы, пока в будущем при помощи columns, т.к. на данный момент ни один браузер не понимает это свойство?

Поправьте, если ошибаюсь.

Предложения всё ещё приветствуются

[psywalker]

Я так понимаю, что полностью такую задачу можно будет решить только в CSS3 и только, увы, пока в будущем при помощи columns, т.к. на данный момент ни один браузер не понимает это свойство?

Поправьте, если ошибаюсь.

Предложения всё ещё приветствуются

А объясни задачу поподробнее и дай скриншоты конечного результата.

[Lob1AV]

Так вроде проще некуда...
Есть следующие варианты:

http://lob1.ru/examples/block/1/

http://lob1.ru/examples/block/3/

http://lob1.ru/examples/block/4/

У всех вышеперечисленных есть расстояния между блоками (обычно в правой колонке).
Задача сделать так: http://lob1.ru/examples/block/2/, при этом высота блоков может быть сколь-угодно разной, но вертикальные расстояния (просветы) между блоками не должны быть.
Как-то так.

Edited January 14, 2016 by Lob1AV

[Lob1AV]

Пока остался на варианте №4: http://lob1.ru/examples/block/4/

Здесь тоже самое, только в стилевом оформлении: http://lob1.ru/project/WordPress/Fortex/New/

На морде подбиралось, чтобы правые блоки были по содержанию больше, чем левые, поэтому относительно ровно всё смотрится. А вот в новостях уже "как получилось".

Edited January 14, 2016 by Lob1AV

[swetlana]

ну а в целом неплохо получилось.

Недостатки не бросаются в глаза, впечатление создаётся.

[Lob1AV]

Спасибо.

Если появятся новые мысли - буду только рад.

[psywalker]

Спасибо.

Если появятся новые мысли - буду только рад.

А в чём прикол и почему обычный список например не подошёл? В чём подвох?

[mishka]

Блокам display: inline-block; vertical-align: top;

и все

Изменения:

Мдя, я неправильно понял, это не катит

[Lob1AV]

А в чём прикол и почему обычный список например не подошёл? В чём подвох?

А разница, что список, что блоки? Ну, например, сделаю списком - суть в принципе не изменится.

[psywalker]

А разница, что список, что блоки? Ну, например, сделаю списком - суть в принципе не изменится.

Да я не про это, я про то, что шум поднят тут с пустого места. Задачка та на вид обычная. Не понятно, что сложного.

[mishka]

Вобщем в голову приходит только вот это готовое решение: http://desandro.com/resources/jquery-masonry/

[Lob1AV]

Да я не про это, я про то, что шум поднят тут с пустого места. Задачка та на вид обычная. Не понятно, что сложного.

Так мне тоже показалась она обычной, но не всё так просто оказалось
Предложения в студию!

Блокам display: inline-block; vertical-align: top;
и все

Изменения:
Мдя, я неправильно понял это не катит

Не успел пример написать... Будет что-то типа этого:

http://lob1.ru/examples/block/5/

Edited January 14, 2016 by Lob1AV

[psywalker]

Вобщем в голову приходит только вот это готовое решение: http://desandro.com/resources/jquery-masonry/

Вот это уже интереснее

[Lob1AV]

Вобщем в голову приходит только вот это готовое решение: http://desandro.com/resources/jquery-masonry/

Большое спасибо! То, что предлагала Светлана, только в упаковке

[psywalker]

Так мне тоже показалась она обычной, но не всё так просто оказалось

Предложения в студию!

Да вон Света уже предложила.

[swetlana]

Да вон Света уже предложила.

если б я знала о существовании плагина, на который Мишка ссылку дал, я б не стала предлагать.

Хороший плагин, понравился.

[yujin11]

Подсмотрел, понравилось, кинул в закладки